<template>
	<view class="top-text">请假
	<div class="totalnum">
		{{totalCount}}
	</div>
	人</view>
	
	<uni-card class="card1">
		<text>今日请假分布</text>
		<div>
		    <button @click="handleClick(1)" class="rounded-button" ref="button1">
		      回家 {{ count1 }}人
		    </button>
		    <button @click="handleClick(2)" class="rounded-button" ref="button2">
		      探亲 {{ count2 }}人
		    </button>
		    <button @click="handleClick(3)" class="rounded-button" ref="button3">
		      旅游 {{ count3 }}人
		    </button>
		  </div>
	</uni-card>
	
	<div>
	    <input type="text" v-model="searchText" @input="search" placeholder="输入搜索内容"  class="search"/>
	  </div>
	
	
	<view>
	    <uni-card v-for="item in cardData" :key="item.id" :data="item" class="leave-card">
	      <text>{{ item.name }}</text>
		  <text>{{ item.number }}</text><br>
		  <text>学院{{ item.academy }}</text><br>
	      <text>专业{{ item.major }}</text><br>
		  <text>请假类型{{ item.type }}</text><br>
		  <text>申请时间{{ item.time }}</text><br>
		  <text>开始时间{{ item.bejin-time }}</text><br>
		  <text>结束时间{{ item.over-time }}</text><br>
		  <text>请假理由{{ item.reason }}</text><br>
		  <!-- <text>{{ item.number? '数据存在' : '数据不存在' }}</text> -->
		  <hr/>
   
	    </uni-card>
	  </view>
	
	
	
</template>

<script setup>

	
	import { ref, onMounted } from 'vue';
	import axios from 'axios';
	
	const cardData = ref([]);
	
	onMounted(() => {
	  for(var i=0;i<=4;i++){
	   axios.get('/data/leave-card.json')
	   .then(response => {
	      cardData.value = response.data.student;
		  
	    console.info(response.data)
		})
		
		
	   .catch(error => {
	       console.error('获取数据出错：', error);
	     });
		 }
	});
	// import { ref } from 'vue';
	
	const count1 = ref(0);
	const count2 = ref(0);
	const count3 = ref(0);
	
	function handleClick(buttonNumber) {
	  switch (buttonNumber) {
	    case 1:
	      count1.value++;
	      document.getElementById('button1').style.backgroundColor ='red';
	      break;
	    case 2:
	      count2.value++;
	      document.getElementById('button2').style.backgroundColor ='red';
	      break;
	    case 3:
	      count3.value++;
	      document.getElementById('button3').style.backgroundColor ='red';
	      break;
	  }
	}
	
	const totalCount = count1.value + count2.value + count3.value;
	
</script>
	
<style>
	.top-text{
		background-color:papayawhip;
		height: 41px;
		width: 100vw;
		align-items: center;
		
	}
	.rounded-button {
			border-radius: 20px;
			padding: 10px 20px;
			background-color: initial;
			border: 2px solid black;
			cursor: pointer;
		}
		.totalnum,.top-text{
			display: inline-block;
			align-items: center;
			text-indent: 50px;
		}
		.search{
			background-color: antiquewhite;
			border-radius: 20px;
			padding: 10px 20px;
			
			border: 2px solid black;
			cursor: pointer;
		}
</style>